<div class="epc-level-content">
  <ul class="epc-level-list" *ngIf="data.data && data.data.length > 0">
    <li *ngFor="let item of data.data; index as i;" [ngClass]="{active: currentActive === i}">
      <div class="subgroup-images" apes-tooltip [apesTitle]="tooltipContent" apesPlacement="bottom"
           (click)="handleClick($event,item,i)">
        <img *ngIf="item && item.realSrc; else elseBlock" [src]="item.realSrc">
        <ng-template #elseBlock>
          <div style="
            font-size: 16px;
            color: red;
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
          "><i style="width: 100%">{{item.name}}</i>
          </div>
        </ng-template>
        <span>{{item.order}}</span>
      </div>

      <p>{{item.name}}</p>

      <ng-template #tooltipContent>
        <ul style="background-color: skyblue; list-style: none; padding: 0; margin: 0">
          <li>名称：<span>{{item.name}}</span></li>
          <li>备注1：<span [innerHTML]="item.remake1"></span></li>
          <li>备注2：<span [innerHTML]="item.remake2"></span></li>
        </ul>
      </ng-template>
    </li>
    <li class="hide"></li>
    <li class="hide"></li>
    <li class="hide"></li>
    <li class="hide"></li>
    <li class="hide"></li>
  </ul>
  <div *ngIf="!data.data || data.data.length === 0">暂无信息</div>
</div>
